<template>
    <div class="i_bg bg_color">
        <div class="i_ban_bg">
            <!--Begin Banner Begin-->
            <div class="banner">    	
                <div class="top_slide_wrap">
                    <el-carousel trigger="click" height="401px">
                        <el-carousel-item v-for="(item,index) in pics" :key="index">
                            <img :src="item.path" width="740" height="401"/>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <!--End Banner End-->
            <div class="inews">
                <div class="news_t">
                    <span class="fr"><router-link to="/back-index/back-news">更多</router-link></span>新闻资讯
                </div>
                <ul>    
                    <li v-for="(item,index) in newsList" :key="index">
                        <span>[ 公告 ]</span>
                        <router-link :to="{path:'/back-index/news-detail',query:{id:item.id}}">{{ item.title }}</router-link>
                    </li>
                </ul>
                <div class="charge_t">
                    话费充值<div class="ch_t_icon"></div>
                </div>
                <form>
                <table border="0" style="width:205px; margin-top:10px;" cellspacing="0" cellpadding="0">
                <tr height="35">
                    <td width="33">号码</td>
                    <td><input type="text" value="" class="c_ipt" /></td>
                </tr>
                <tr height="35">
                    <td>面值</td>
                    <td>
                        <select class="jj" name="city">
                        <option value="0" selected="selected">100元</option>
                        <option value="1">50元</option>
                        <option value="2">30元</option>
                        <option value="3">20元</option>
                        <option value="4">10元</option>
                        </select>
                        <span style="color:#ff4e00; font-size:14px;">￥99.5</span>
                    </td>
                </tr>
                <tr height="35">
                    <td colspan="2"><input type="submit" value="立即充值" class="c_btn" /></td>
                </tr>
                </table>
                </form>
            </div>
        </div>
        <!--Begin 热门商品 Begin-->
        <div class="content mar_10">
            <div class="h_l_img">
                <div class="img"><img src="../../assets/images/l_img.jpg" width="188" height="188" /></div>
                <div class="pri_bg">
                    <span class="price fl">￥53.00</span>
                    <span class="fr">16R</span>
                </div>
            </div>
            <div class="hot_pro">        	
                <div id="featureContainer">
                    <div id="feature">
                        <div id="block">
                            <div id="botton-scroll">
                                <ul class="featureUL">
                                    <li class="featureBox">
                                        <div class="box">
                                            <div class="h_icon"><img src="../../assets/images/hot.png" width="50" height="50" /></div>
                                            <div class="imgbg">
                                                <a href="#"><img src="../../assets/images/hot1.jpg" width="160" height="136" /></a>
                                            </div>                                        
                                            <div class="name">
                                                <a href="#">
                                                <h2>德国进口</h2>
                                                德亚全脂纯牛奶200ml*48盒
                                                </a>
                                            </div>
                                            <div class="price">
                                                <font>￥<span>189</span></font> &nbsp; 26R
                                            </div>
                                        </div>
                                    </li>
                                    <li class="featureBox">
                                        <div class="box">
                                            <div class="h_icon"><img src="../../assets/images/hot.png" width="50" height="50" /></div>
                                            <div class="imgbg">
                                                <a href="#"><img src="../../assets/images/hot2.jpg" width="160" height="136" /></a>
                                            </div>                                        
                                            <div class="name">
                                                <a href="#">
                                                <h2>iphone 6S</h2>
                                                Apple/苹果 iPhone 6s Plus公开版
                                                </a>
                                            </div>
                                            <div class="price">
                                                <font>￥<span>5288</span></font> &nbsp; 25R
                                            </div>
                                        </div>
                                    </li>
                                    <li class="featureBox">
                                        <div class="box">
                                            <div class="h_icon"><img src="../../assets/images/hot.png" width="50" height="50" /></div>
                                            <div class="imgbg">
                                                <a href="#"><img src="../../assets/images/hot3.jpg" width="160" height="136" /></a>
                                            </div>                                        
                                            <div class="name">
                                                <a href="#">
                                                <h2>倩碧特惠组合套装</h2>
                                                倩碧补水组合套装8折促销
                                                </a>
                                            </div>
                                            <div class="price">
                                                <font>￥<span>368</span></font> &nbsp; 18R
                                            </div>
                                        </div>
                                    </li>
                                    <li class="featureBox">
                                        <div class="box">
                                            <div class="h_icon"><img src="../../assets/images/hot.png" width="50" height="50" /></div>
                                            <div class="imgbg">
                                                <a href="#"><img src="../../assets/images/hot4.jpg" width="160" height="136" /></a>
                                            </div>                                        
                                            <div class="name">
                                                <a href="#">
                                                <h2>品利特级橄榄油</h2>
                                                750ml*4瓶装组合 西班牙原装进口
                                                </a>
                                            </div>
                                            <div class="price">
                                                <font>￥<span>280</span></font> &nbsp; 30R
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <a class="h_prev" href="javascript:void();">Previous</a>
                        <a class="h_next" href="javascript:void();">Next</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Begin 限时特卖 Begin-->
        <div class="i_t mar_10">
            <span class="fl">限时特卖</span>
            <span class="i_mores fr"><a href="#">更多</a></span>
        </div>
        <div class="content">
            <div class="i_sell">
                <div id="imgPlay">
                    <ul class="imgs" id="actor">
                        <li><a href="#"><img src="../../assets/images/tm_r.jpg" width="211" height="357" /></a></li>
                        <li><a href="#"><img src="../../assets/images/tm_r.jpg" width="211" height="357" /></a></li>
                        <li><a href="#"><img src="../../assets/images/tm_r.jpg" width="211" height="357" /></a></li>
                    </ul>
                    <div class="previ">上一张</div>
                    <div class="nexti">下一张</div>
                </div>        
            </div>
            <div class="sell_right">
                <div class="sell_1">
                    <div class="s_img"><a href="#"><img src="../../assets/images/tm_1.jpg" width="185" height="155" /></a></div>
                    <div class="s_price">￥<span>89</span></div>
                    <div class="s_name">
                        <h2><a href="#">沙宣洗发水</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
                <div class="sell_2">
                    <div class="s_img"><a href="#"><img src="../../assets/images/tm_2.jpg" width="185" height="155" /></a></div>
                    <div class="s_price">￥<span>289</span></div>
                    <div class="s_name">
                        <h2><a href="#">德芙巧克力</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
                <div class="sell_b1">
                    <div class="sb_img"><a href="#"><img src="../../assets/images/tm_b1.jpg" width="242" height="356" /></a></div>
                    <div class="s_price">￥<span>289</span></div>
                    <div class="s_name">
                        <h2><a href="#">东北大米</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
                <div class="sell_3">
                    <div class="s_img"><a href="#"><img src="../../assets/images/tm_3.jpg" width="185" height="155" /></a></div>
                    <div class="s_price">￥<span>289</span></div>
                    <div class="s_name">
                        <h2><a href="#">迪奥香水</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
                <div class="sell_4">
                    <div class="s_img"><a href="#"><img src="../../assets/images/tm_4.jpg" width="185" height="155" /></a></div>
                    <div class="s_price">￥<span>289</span></div>
                    <div class="s_name">
                        <h2><a href="#">美妆</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
                <div class="sell_b2">
                    <div class="sb_img"><a href="#"><img src="../../assets/images/tm_b2.jpg" width="242" height="356" /></a></div>
                    <div class="s_price">￥<span>289</span></div>
                    <div class="s_name">
                        <h2><a href="#">美妆</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                    </div>
                </div>
            </div>
        </div>
        <!--End 限时特卖 End-->
        <div class="content mar_20">
            <img src="../../assets/images/mban_1.jpg" width="1200" height="110" />
        </div>
        <!-- 商品分类的组件 -->
        <catagory-item v-for="(item,index) in categories1" :key="item.id"  :category="item" :index="index+1"></catagory-item>
        <!--Begin 猜你喜欢 Begin-->
        <div class="i_t mar_10">
            <span class="fl">猜你喜欢</span>
        </div>    
        <div class="like">        	
            <div id="featureContainer1">
                <div id="feature1">
                    <div id="block1">
                        <div id="botton-scroll1">
                            <ul class="featureUL">
                                <li class="featureBox">
                                    <div class="box">
                                        <div class="imgbg">
                                            <a href="#"><img src="../../assets/images/hot1.jpg" width="160" height="136" /></a>
                                        </div>                                        
                                        <div class="name">
                                            <a href="#">
                                            <h2>德国进口</h2>
                                            德亚全脂纯牛奶200ml*48盒
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>189</span></font> &nbsp; 26R
                                        </div>
                                    </div>
                                </li>
                                <li class="featureBox">
                                    <div class="box">
                                        <div class="imgbg">
                                            <a href="#"><img src="../../assets/images/hot2.jpg" width="160" height="136" /></a>
                                        </div>                                        
                                        <div class="name">
                                            <a href="#">
                                            <h2>iphone 6S</h2>
                                            Apple/苹果 iPhone 6s Plus公开版
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>5288</span></font> &nbsp; 25R
                                        </div>
                                    </div>
                                </li>
                                <li class="featureBox">
                                    <div class="box">
                                        <div class="imgbg">
                                            <a href="#"><img src="../../assets/images/hot3.jpg" width="160" height="136" /></a>
                                        </div>                                        
                                        <div class="name">
                                            <a href="#">
                                            <h2>倩碧特惠组合套装</h2>
                                            倩碧补水组合套装8折促销
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>368</span></font> &nbsp; 18R
                                        </div>
                                    </div>
                                </li>
                                <li class="featureBox">
                                    <div class="box">
                                        <div class="imgbg">
                                            <a href="#"><img src="../../assets/images/hot4.jpg" width="160" height="136" /></a>
                                        </div>                                        
                                        <div class="name">
                                            <a href="#">
                                            <h2>品利特级橄榄油</h2>
                                            750ml*4瓶装组合 西班牙原装进口
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>280</span></font> &nbsp; 30R
                                        </div>
                                    </div>
                                </li>
                                <li class="featureBox">
                                    <div class="box">
                                        <div class="imgbg">
                                            <a href="#"><img src="../../assets/images/hot4.jpg" width="160" height="136" /></a>
                                        </div>                                        
                                        <div class="name">
                                            <a href="#">
                                            <h2>品利特级橄榄油</h2>
                                            750ml*4瓶装组合 西班牙原装进口
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>280</span></font> &nbsp; 30R
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a class="l_prev" href="javascript:void();">Previous</a>
                    <a class="l_next" href="javascript:void();">Next</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CatagoryItem from './products/CatagoryItem.vue';

export default {
    name:'FrontContent',
    components:{CatagoryItem},
    mounted(){
        this.getNews();
        console.log("content",this.categories1);
    },
    props:['categories1'],
    data:function(){
        return{
            newsList:[],
             pics:[
                {path:require('@/assets/images/ban1.jpg')},
                {path:require('@/assets/images/ban1.jpg')},
                {path:require('@/assets/images/ban1.jpg')},
            ]  
        }
    },
    methods:{
         //获取首页资讯信息
        getNews(){
            this.$axios({
                url:'/easybuy/news/getlist',
            }).then(rs=>{
                console.log(rs);
                this.newsList = rs.data.pageInfo.list;
            })
        },
    }
}
</script>

<style scoped>

</style>